<template>
  <view class="mycenter">
    <view class="head">
      <view class="head1">
        <view class="head1-1"> 我的 </view>
        <view class="head1-2">
          <image
            src="../../static/iamges/msg2.png"
            mode=""
            @click="goto('infomation')"
          ></image>
          <image src="../../static/iamges/mycilun.png" mode=""></image>
        </view>
      </view>
      <view>
        <view class="head2" v-if="code">
          <view @click="goto('changeInformation')">
            <image class="img" :src="userData.userPicture"></image>
          </view>
          <view id="my">
            <view style="font-size: 36rpx; font-weight: 700"
              >{{ userData.userNickname ? userData.userNickname : "空" }}
            </view>
            <view class="xinyong">
              <view class="box1"> {{ userData.userAssessmentLevel }} </view>
              <view class="box2"> 信用值{{ userData.userScore }} </view>
            </view>
          </view>
          <view class="qianbao" @click="goto('myWallet')">
            <text style="color: #ffffff; font-size: 40rpx; font-weight: 700"
              >{{ money }}
            </text>
            <view style="color: #ffc7cd; font-size: 24rpx; margin-top: 15rpx"
              >我的钱包</view
            >
          </view>
        </view>
        <button v-else @click="gotoLogin">请先登录</button>
      </view>
    </view>
    <view class="menus">
      <Menu></Menu>
    </view>
    <view class="context">
      <Center></Center>
    </view>
	<!-- 底部导航栏 -->
	<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
  </view>
</template>

<script>
import Menu from "../../components/mycenter/menus.vue";
import Center from "../../components/mycenter/center.vue";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("user");
export default {
  components: {
    Menu,
    Center,
  },
  data() {
    return {
		tabbar: '',
      userData: {},
      money: 0,
        code:'',
    };
  },
  onLoad() {
  	/**
  	 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
  	 */
  	this.tabbar = [{
  			iconPath: "home",
  			selectedIconPath: "home-fill",
  			text: '借贷',
  			count: 0,
  			isDot: true,
  			customIcon: false,
  			pagePath: "/pages/lending/lending"
  		},
  		{
  			iconPath: "red-packet",
  			selectedIconPath: "red-packet-fill",
  			text: '财富',
  			customIcon: false,
  			pagePath: "/pages/riches/riches"
  		},
  		{
  			iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
  			selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
  			text: '首页',
  			midButton: true,
  			customIcon: false,
  			pagePath: "/pages/index/index"
  		},
  		{
  			iconPath: "bell",
  			selectedIconPath: "bell-fill",
  			text: '财顾',
  			customIcon: false,
  			pagePath: "/pages/adviser/adviser"
  		},
  		{
  			iconPath: "account",
  			selectedIconPath: "account-fill",
  			text: '我的',
  			count: 0,
  			isDot: false,
  			customIcon: false,
  			pagePath: "/pages/mycenter/mycenter"
  		},
  	]
  },
  onShow() {
    this.userDetail();
    this.getmoney();
    this.show();
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  methods: {
    ...mapActions(["allUserinfo", "userWalletBalance"]),
    show() {
      if (uni.getStorageSync("token")) {
		this.code = uni.getStorageSync("token");
      } else {
		this.code = "";
		
      }
    },

    async userDetail() {
      console.log("用户详情");
      const data = await this.allUserinfo();
      if (data.code == 10001) {
        this.userData = data.data;
        console.log("。。。。。。。。。。", data);
      }
    },
    // 余额
    async getmoney() {
      const data = await this.userWalletBalance();
      console.log("data", data);
      this.money = data.data;
    },
    goto(data) {
      if (this.code && data == "changeInformation") {
        this.gotoin();
      } else if (this.code && data == "myWallet") {
        this.gotoWallet();
      } else if (this.code && data == "infomation") {
        this.goroInfomation();
      } else {
        uni.showModal({
          title: "提示",
          content: "请先登录",
          success: function (res) {
            if (res.confirm) {
              console.log("用户点击确定");
              uni.navigateTo({
                url: "/pages/login/login",
              });
            }
          },
        });
      }
    },
    // 跳转头像
    gotoin() {
      console.log(12121);
      uni.navigateTo({
        url: "/pages/changeInformation/changeInformation",
      });
    },
    // 跳转充值
    gotoWallet() {
      uni.navigateTo({
        url: "/pages/myWallet/myWallet",
      });
    },
    // 跳转消息
    goroInfomation() {
      uni.navigateTo({
        url: "/pages/infomation/infomation",
      });
    },
    gotoLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
	//下拉刷新
	onPullDownRefresh() {
		console.log('refresh');
		// setTimeout(function () {
		//     uni.stopPullDownRefresh();
		// }, 1000);
		// this.getnewsShow();
		// this.getcaijinnews();
		// // this.getUserData();
		// this.userDetail();
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	}
  },
};
</script>

<style lang="scss" scoped>
.mycenter {
  background-color: #fafafa;
  //height: calc(100vh -150rpx);
  height: calc(85.5vh + 341rpx);

  .context {
    width: 702rpx;
    background-color: #ffffff;
    padding-left: 20rpx;
    border-radius: 20rpx;
    margin: 150rpx auto;
  }
}

#my {
  margin-left: 20rpx;
  color: #ffffff;
  padding: 20rpx 0px;

  .xinyong {
    // width: 272rpx;
    margin-top: 20rpx;
    display: flex;

    .box1 {
      width: 142rpx;
      height: 34rpx;
      border: 1px solid #ffc7cd;
      text-align: center;
      color: #ffc7cd;
      box-sizing: border-box;
      border-radius: 20rpx;

      font-size: 24rpx;
      margin-right: 24rpx;
    }

    .box2 {
      width: 136rpx;
      height: 34rpx;
      border: 1px solid #ffc7cd;
      text-align: center;
      color: #ffc7cd;
      box-sizing: border-box;
      border-radius: 20rpx;

      font-size: 24rpx;
      margin-right: 24rpx;
    }
  }
}

.head {
  width: 100vw;
  height: 400rpx;
  background-color: #ff4658;
  box-sizing: border-box;
  padding: 0px 24rpx;

  .head1 {
    display: flex;
    height: 60rpx;
    width: 100%;

    box-sizing: border-box;

    .head1-1 {
      width: 70%;
      height: 100%;

      color: #ffffff;
      font-size: 36rpx;
      font-weight: 700;
    }

    .head1-2 {
      width: 30%;
      height: 100%;

      padding-left: 55rpx;

      image {
        width: 50rpx;
        height: 50rpx;
        margin-left: 24rpx;
      }
    }
  }

  .head2 {
    margin-top: 50rpx;

    height: 155rpx;
    box-sizing: border-box;
    display: flex;

    .qianbao {
      padding: 15rpx 0px;

      width: 250rpx;
      text-align: right;
    }

    .img {
      height: 150rpx;
      width: 150rpx;
      border-radius: 50%;
    }
  }
}
</style>
